<template>
	<view class="new-file">

		<!-- 第一种方法 -->
		<!-- 头部选项卡 -->
		<ul class="list flex">
			<li :class="navIndex==1?'activite':''" @click="checkIndex(1)">个人排行</li>
			<li :class="navIndex==2?'activite':''" @click="checkIndex(2)">今日排行</li>
			<li :class="navIndex==3?'activite':''" @click="checkIndex(3)">队伍排行</li>
			<li :class="navIndex==4?'activite':''" @click="checkIndex(4)">周排行</li>
		</ul>

		<!-- 内容切换 -->

		<view class="commit" v-if="navIndex==1">
			<view class="content">
				<p>{{pai}}</p>
			</view>
			<view class="main flex" v-for="(item,index) in list1">
				<view class="left flex">
					<span>{{item.rank}}</span>
					<image :src="item.image" mode="" class="img1"></image>
					<!-- <image :src="item.img2" mode="" class="img2"></image> -->
					<span class="flex1">
						<p class="name">{{item.name}}</p>
						<p class="leiji">{{item.sort}}</p>
					</span>
				</view>
				<view class="right">
					{{item.mileage}}
				</view>
			</view>
		</view>
		<view class="commit" v-if="navIndex==2">
			<view class="content">
				<p>{{pai2}}</p>
			</view>
			<view class="main flex" v-for="(item,index) in list2">
				<view class="left flex">
					<span>{{item.rank}}</span>
					<image :src="item.image" mode="" class="img1"></image>
					<!-- <image :src="item.img2" mode="" class="img2"></image> -->
					<span class="flex1">
						<p class="name">{{item.name}}</p>
						<p class="leiji">{{item.sort}}</p>
					</span>
				</view>
				<view class="right">
					{{item.mileage}}
				</view>
			</view>
		</view>
		<view class="commit1	" v-if="navIndex==3">
			<p>{{title}}</p>
			<view class="main1 flex" v-for="(item,index) in list3">
				<view class="">
					{{item.name}}
					{{item.rank}}
				</view>
				<view class="">
					{{item.mileage}}
				</view>
			</view>
		</view>
		<view class="commit" v-if="navIndex==4">
			<view class="content">
				<p>{{pai4}}</p>
			</view>
			<view class="main flex" v-for="(item,index) in list1">
				<view class="left flex">
					<span>{{item.rank}}</span>
					<image :src="item.image" mode="" class="img1"></image>
					<!-- <image :src="item.img2" mode="" class="img2"></image> -->
					<span class="flex1">
						<p class="name">{{item.name}}</p>
						<p class="leiji">{{item.sort}}</p>
					</span>
				</view>
				<view class="right">
					{{item.mileage}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex: 1,
				pai: '我的排名:未上榜(共106人)',
				pai2: '我的排名:未上榜(共300人)',
				pai3: '我的排名:未上榜(共301人)',
				pai4: '我的排名:未上榜(共103人)',
				list: [{
						title: '个人排行'
					},
					{
						title: '今日排行'
					},
					{
						title: '队伍排行'
					},
					{
						title: '周排行'
					}
				],
				title: "乡村振兴带头人能力提升班",
				list1:[],
				list2:[],
				list3:[],
				list4:[]
			}
		},
		onLoad() {
this.roll(),
this.roll2(),
this.roll3(),
this.roll4()
		},
		methods: {
			checkIndex(index) {
				this.navIndex = index;
			},
			roll: function() {
				var that = this
				uni.request({
					url: "http://43.143.147.173:8090/chuxing/Index/personal",
					data: "",
					success(res) {
						console.log(res.data.data)
						var datas = res.data.data
						that.list1 = datas
					}
				})
			},
			roll2: function() {
				var that = this
				uni.request({
					url: "http://43.143.147.173:8090/chuxing/Index/today",
					data: "",
					success(res) {
						console.log(res.data.data)
						var datas = res.data.data
						that.list2 = datas
					}
				})
			},
			roll3: function() {
				var that = this
				uni.request({
					url: "http://43.143.147.173:8090/chuxing/Index/troops",
					data: "",
					success(res) {
						console.log(res.data.data)
						var datas = res.data.data
						that.list3 = datas
					}
				})
			},
			roll4: function() {
				var that = this
				uni.request({
					url: "http://43.143.147.173:8090/chuxing/Index/cycle",
					data: "",
					success(res) {
						console.log(res.data.data)
						var datas = res.data.data
						that.list4 = datas
					}
				})
			},
		}
	}
</script>

<style>
	.flex {
		display: flex;
		justify-content: space-between;
		/* flex-direction: row; */
	}

	.flex1 {
		display: flex;
		flex-flow: column;
	}

	.new-file {
		background-color: #f1f1f1;
		width: 100%;
		height: 100%;
	}

	.list {
		width: 90%;
		margin: 0 auto;
		text-align: center;
		overflow: hidden;
	}

	.list li {
		padding: 0.9rem;
		border-bottom: 0.2rem #ccc solid;
		margin: 0 0.1rem;
	}

	.activite {
		font-weight: bold;
		border-bottom: 0.2rem solid #0065d9;
	}

	.content p {
		text-align: center;
		font-size: 0.9rem;
		color: #666;
	}

	.main {
		width: 90%;
		background-color: #fff;
		margin: 1rem auto;
		padding: 1rem 0;
		border-radius: 0.5rem;
	}

	.left {
		width: 60%;
		position: relative;
	}

	.left .img1 {
		width: 15%;
		height: 60%;
		position: absolute;
		top:10rpx;
		left: 3.5rem;
	}

/* 	.left .img2 {
		width: 50px;
		height: 50px;
		border-radius: 2rem;
	}
 */
	.left .name {
		font-size: 1.2rem;
	}

	.left .leiji {
		color: #666;
		font-size: 0.8rem;
	}

	.right {
		color: #f00;
		line-height: 3rem;
	}
	.commit1{width:90%;background-color:#fff;margin: 1rem auto;padding:1rem;}
	.commit1 p{ font-size:1.3rem;}
	.main1{padding:0.2rem 0;}
</style>
